<template>
  <div>
    <basic-container>
      <avue-crud
        ref="scopeTree"
        :data="tableData"
        :option="option"
        :page="page"
        @row-save="rowSave"
        @refresh-change="searchHandler"
        @row-del="btnDelete"
        @row-update="rowUpdate"
        @on-load="onLoad"
        @search-change="searchChange"
      >
      </avue-crud>
    </basic-container>
  </div>
</template>
<script>
import {
  addClassTeacher,
  getClassTeacher,
  deleteClassTeacher,
  updateClassTeacher,
} from "@/api/basicData/classTeacher";
import { baseUrl } from "@/config/env";
export default {
  name: "",
  data() {
    return {
      page: {
        pageSize: 10,
        total: 10,
      },
      searchForm: {
        className: "",
        currentPage: 1,
        pageSize: 10,
        departmentId: "",
      },
      classId: "",
      tableData: [],
      option: {
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        searchMenuSpan: 6,
        align: "center",
        editBtn: this.getPermission("classTeacher_update"),
        delBtn: this.getPermission("classTeacher_delete"),
        addBtn: this.getPermission("classTeacher_add"),
        viewBtn: this.getPermission("classTeacher_get"),
        column: [
          {
            searchLabelWidth:45,
            label: "班级",
            prop: "classId",
            type: "select",
            remote: true,
            hide: true,
            dicUrl: `${baseUrl}/pc/stu-class/byName?name={{key}}`,
            props: {
              label: "className",
              value: "id",
            },
            span: 24,
            rules: [
              {
                required: true,
                message: "班级不能为空",
                trigger: "blur",
              },
            ],
          },
          {
            search: true,
            label: "所属班级",
            prop: "className",
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "所属专业",
            prop: "departmentId",
            type: "select",
            remote: true,
            props: {
              label: "name",
              value: "id",
            },
            dicUrl: `${baseUrl}/pc/department/all`,
            span: 24,
            rules: [
              {
                required: true,
                message: "所属支部不能为空",
                trigger: "blur",
              },
            ],
          },
          {
            search: true,
            label: "班主任",
            prop: "teacherKey",
            span: 24,
            type: "select",
            remote: true,
            dicUrl: `${baseUrl}/pc/per-teacher/byName?name={{key}}`,
            props: {
              label: "name",
              value: "teacherKey",
            },
            rules: [
              {
                required: true,
                message: "班主任不能为空",
                trigger: "blur",
              },
            ],
          },
        ],
      },
    };
  },
  created() {
    this.searchHandler();
  },
  methods: {
    searchChange(params, done){
       console.log(params);
       this.searchForm.teacherKey = params.teacherKey
       this.searchForm.className = params.className
       this.searchHandler();
       done()
    },
    searchHandler() {
      getClassTeacher(this.searchForm).then((res) => {
        this.page.pageSizes = res.data.pageSizes;
        this.page.total = res.data.total;
        this.tableData = res.data.records;
      });
    },
    onLoad(page) {
      this.searchForm.currentPage = page.currentPage;
      this.searchForm.pageSize = page.pageSize;
      this.searchHandler();
    },
    btnDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row);
          deleteClassTeacher([row.id]).then(() => {
            this.$message.success("删除成功");
            this.searchHandler();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    rowUpdate(form, done, loading) {
      loading();
      updateClassTeacher(form)
        .then(() => {
          this.$message.success("更新成功");
          this.searchHandler();
        })
        .finally(() => {
          done();
        });
    },
    rowSave(form, done, loading) {
      loading();
      addClassTeacher(form)
        .then(() => {
          this.$message.success("添加成功");
          this.searchHandler();
        })
        .finally(() => {
          done();
        });
    },
  },
};
</script>
